import type { FC, ReactNode } from "react";
import AreaHeaderV1 from "@/components/area-header-v1";
import React, { memo } from "react";
import { RankingWrapper } from "./style";
import { useAppSelector } from "@/store";
import { shallowEqual } from "react-redux";
import TopRankingItem from "@/views/discover/c-views/recommend/c-components/top-ranking-item";

export interface IProps {
  children?: ReactNode;
}

const TopRanking: FC<IProps> = () => {
  const { rankings = [] } = useAppSelector(
    (state) => ({
      rankings: state.recommend.rankings
    }),
    shallowEqual
  );
  return (
    <RankingWrapper>
      <AreaHeaderV1 title="榜单" moreLink="/discover/ranking" />
      <div className="content">
        {rankings.map((item) => {
          return <TopRankingItem key={item.id} itemData={item} />;
        })}
      </div>
    </RankingWrapper>
  );
};

export default memo(TopRanking);
